<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>数据可视化项目</title>
		<link rel="stylesheet" href="fonts/icomoon.css" />
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/echarts.min.js"></script>
		<script src="js/flexible.js"></script>
		<script src="js/jquery.min.js"></script>
	</head>

	<body>
		<!-- 父容器大盒子 -->
		<div class="viewport">
			<div class="column">
				<!-- 概览区域模块制作 -->
				<div class="panel overview">
					<div class="inner">
						<ul>
							<li>
								<h4>2,190</h4>
								<span>
									<i class="icon-dot" style="color: #006cff"></i>
									设备总数
								</span>
							</li>
							<li class="item">
								<h4>190</h4>
								<span>
									<i class="icon-dot" style="color: #6acca3"></i>
									季度新增
								</span>
							</li>
							<li>
								<h4>3,001</h4>
								<span>
									<i class="icon-dot" style="color: #6acca3"></i>
									运营设备
								</span>
							</li>
							<li>
								<h4>108</h4>
								<span>
									<i class="icon-dot" style="color: #ed3f35"></i>
									异常设备
								</span>
							</li>
						</ul>
					</div>
				</div>
				<!-- 监控区域模块制作 -->
				<div class="panel monitor">
					<div class="inner">
						<div class="tabs">
							<a href="javascript:;" class="active">故障设备监控</a>
							<a href="javascript:;">异常设备监控</a>
						</div>
						<div class="content" style="display: block;">
							<div class="head">
								<span class="col">故障时间</span>
								<span class="col">设备地址</span>
								<span class="col">异常代码</span>
							</div>
							<div class="marquee-view">
								<div class="marquee">
									<div class="row">
										<span class="col">20180701</span>
										<span class="col">11北京市昌平西路金燕龙写字楼</span>
										<span class="col">1000001</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20190601</span>
										<span class="col">北京市昌平区城西路金燕龙写字楼</span>
										<span class="col">1000002</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20190704</span>
										<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
										<span class="col">1000003</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20180701</span>
										<span class="col">北京市昌平区建路金燕龙写字楼</span>
										<span class="col">1000004</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20190701</span>
										<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
										<span class="col">1000005</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20190701</span>
										<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
										<span class="col">1000006</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20190701</span>
										<span class="col">北京市昌平区建西路金燕龙写字楼</span>
										<span class="col">1000007</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20190701</span>
										<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
										<span class="col">1000008</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20190701</span>
										<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
										<span class="col">1000009</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20190710</span>
										<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
										<span class="col">1000010</span>
										<span class="icon-dot"></span>
									</div>
								</div>
							</div>
						</div>
			<div class="content">
              <div class="head">
                <span class="col">异常时间</span>
                <span class="col">设备地址</span>
                <span class="col">异常代码</span>
              </div>
              <div class="marquee-view">
                <div class="marquee">
                  <div class="row">
                    <span class="col">20190701</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000001</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20190701</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20190703</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20190704</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20190705</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20190706</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20190707</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20190708</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20190709</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20190710</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                    <span class="icon-dot"></span>
                  </div>
                </div>
              </div>
            </div> 
          </div>
        </div>
            <!-- 点位 -->
            <div class="point panel">
              <div class="inner">
                <h3>点位分布统计</h3>
                <div class="chart">
                  <div class="pie"></div>
                  <div class="data">
                    <div class="item">
                      <h4>320,11</h4>
                      <span>
                        <i class="icon-dot" style="color: #ed3f35"></i>
                        点位总数
                      </span>
                    </div>
                    <div class="item">
                      <h4>418</h4>
                      <span>
                        <i class="icon-dot" style="color: #eacf19"></i>
                        本月新增
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
	  </div>
      <div class="column">
		  <!-- 地图 -->
		  <div class="map">
		    <h3>
		      <span class="icon-cube"></span>
		      设备数据统计
		    </h3>
		    <div class="chart">
		      <div class="geo"></div>
		    </div>
		  </div>
		  <div class="users panel">
		    <div class="inner">
		      <h3>全国用户总量统计</h3>
		      <div class="chart">
		        <div class="bar"></div>
		        <div class="data">
		          <div class="item">
		            <h4>120,899</h4>
		            <span>
		              <i class="icon-dot" style="color: #ed3f35"></i>
		              用户总量
		            </span>
		          </div>
		          <div class="item">
		            <h4>248</h4>
		            <span>
		              <i class="icon-dot" style="color: #eacf19"></i>
		              本月新增
		            </span>
		          </div>
		        </div>
		      </div>
		    </div>
		  </div>
	  </div>
      <div class="column">
		  <div class="order panel">
		    <div class="inner">
		      <!-- 筛选 -->
		      <div class="filter">
		        <a href="javascript:;"  class="active">365天</a>
		        <a href="javascript:;" >90天</a>
		        <a href="javascript:;" >30天</a>
		        <a href="javascript:;" >24小时</a>
		      </div>
		      <!-- 数据 -->
		      <div class="data">
		        <div class="item">
		          <h4>20,301,987</h4>
		          <span>
		            <i class="icon-dot" style="color: #ed3f35;"></i>
		            订单量
		          </span>
		        </div>
		        <div class="item">
		          <h4>99834</h4>
		          <span>
		            <i class="icon-dot" style="color: #eacf19;"></i>
		            销售额(万元)
		          </span>
		        </div>
		      </div>
		    </div>
		  </div>
	      <!-- 销售额 -->
	      <div class="sales panel">
	        <div class="inner">
	          <div class="caption">
	            <h3>销售额统计</h3>
	            <a href="javascript:;" class="active" data-type='year'>年</a>
	            <a href="javascript:;" data-type='quarter'>季</a>
	            <a href="javascript:;" data-type='month'>月</a>
	            <a href="javascript:;" data-type='week'>周</a>
	          </div>
	          <div class="chart">
	            <div class="label">单位:万</div>
	            <div class="line"></div>
	          </div>
	        </div>
	      </div>
			<div class="wrap">
			     <div class="channel panel">
			       <div class="inner">
			         <h3>渠道分布</h3>
			         <div class="data">
			           <div class="radar"></div>
			         </div>
			       </div>
			     </div>
			     <div class="quarter panel">
			       <div class="inner">
			         <h3>一季度销售进度</h3>
			         <div class="chart">
			           <div class="box">
			             <div class="gauge"></div>
			             <div class="label">75<small> %</small></div>
			           </div>
			           <div class="data">
			             <div class="item">
			               <h4>1,321</h4>
			               <span>
			                 <i class="icon-dot" style="color: #6acca3"></i>
			                 销售额(万元)
			               </span>
			             </div>
			             <div class="item">
			               <h4>150%</h4>
			               <span>
			                 <i class="icon-dot" style="color: #ed3f35"></i>
			                 同比增长
			               </span>
			             </div>
			           </div>
			         </div>
			       </div>
			     </div>
			   </div>
			   <!-- 排行榜 -->
			   <div class="top panel">
			     <div class="inner">
			       <div class="all">
			         <h3>全国热榜</h3>
			         <ul>
			           <li>
			             <i class="icon-cup1" style="color: #d93f36;"></i>
			             可爱多
			           </li>
			           <li>
			             <i class="icon-cup2" style="color: #68d8fe;"></i>
			             娃哈啥
			           </li>
			           <li>
			             <i class="icon-cup3" style="color: #4c9bfd;"></i>
			             喜之郎
			           </li>
			         </ul>
			       </div>
			       <div class="province">
			         <h3>各省热销 <i class="date">// 近30日 //</i></h3>
			         <div class="data">
			           <ul class="sup">
			           <!--  <li>
			               <span>北京</span>
			               <span>25,179 <s class="icon-up"></s></span>
			             </li>
			             <li>
			               <span>河北</span>
			               <span>23,252 <s class="icon-down"></s></span>
			             </li>
			             <li>
			               <span>上海</span>
			               <span>20,760 <s class="icon-up"></s></span>
			             </li>
			             <li>
			               <span>江苏</span>
			               <span>23,252 <s class="icon-down"></s></span>
			             </li>
			             <li>
			               <span>山东</span>
			               <span>20,760 <s class="icon-up"></s></span>
			             </li> -->
			           </ul>
			           <ul class="sub">
			             <!-- <li><span></span><span> <s class="icon-up"></s></span></li> -->
			           </ul>
			         </div>
			       </div>
			     </div>
			   </div>
	  </div>
    </div>
	<script src="js/china.js" ></script>
	<script src="js/myMap.js" ></script>
    <script src="js/index.js"></script>
  </body>
</html>
